<template>
    <view class="canDo">
        <Navigation title="能吃什么" background="#fff" />
        <view class="search ph-32 pv-12 h-88">
            <view class="w-686 h-64 search-box">
                <u-search
                    placeholder="请输入您想要搜索的内容"
                    v-model="listParams.keyword"
                    bgColor="#F5F5F5"
                    height="32"
                    :showAction="false"
                    searchIconColor="#CCCCCC"
                    placeholderColor="#CCCCCC"
                    :clearabled="false"
                ></u-search>
                <view class="text fs-30 text-color4 w-108" @click="handleSearch">搜索</view>
            </view>
        </view>
        <view class="f jc-s-b ph-32 h-80 ai-c type-box">
            <view class="w-550">
                <u-tabs
                    :list="typeList"
                    lineColor="#FABB3C"
                    keyName="categoryName"
                    :activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
                    :inactiveStyle="{ fontSize: '28rpx', color: '#999999' }"
                    @click="changeCategory"
                >
                </u-tabs>
            </view>
            <view class="f f1 ai-c ml-32" @click="show = true">
                <view class="fs-24 mr-8" :class="show ? 'text-color' : 'text-color4'">{{ listParams.petType == 1 ? '汪星人' : '喵星人' }}</view>
                <image src="http://cwht.ricecs.cn/app/index/change.png" class="w-24 h-24"></image>
            </view>
        </view>
        <scroll-view scroll-y="true" class="list" :style="{ height: height - 40 + 'px' }" @scrolltolower="scrolltolower">
            <view class="f mt-20 pl-20">
                <view
                    class="w-138 h-64 b-64 f ai-c jc-c mr-16 status"
                    v-for="(item, index) in statusList"
                    :key="index"
                    @click="changeStatus(index, item)"
                    :class="index === status ? 'statusActive' : ''"
                >
                    <image src="http://cwht.ricecs.cn/app/index/error.png" class="w-26 h-26 mr-12" v-show="index == 0"></image>
                    <image src="http://cwht.ricecs.cn/app/index/warn.png" class="w-26 h-26 mr-12" v-show="index == 1"></image>
                    <image src="http://cwht.ricecs.cn/app/index/success.png" class="w-26 h-26 mr-12" v-show="index == 2"></image>
                    <view class="fs-26 text-color4">{{ item.name }}</view>
                </view>
            </view>
            <view class="f fc-w ph-20 pv-20">
                <view class="w-169 b-16 mr-12 mb-20 list-box" v-for="(item, index) in list" :key="index" @click="toCanDoDetail(item)">
                    <image :src="item.iconPath" class="w-168 h-168 b-16"></image>
                    <view class="fs-26 text-color4 mt-12 f jc-c">{{ item.foodName }}</view>
                </view>
            </view>
            <view class="shade" v-show="show">
                <view class="w-200 types b-12">
                    <view class="up"></view>
                    <view class="h-100 w-f f ai-c jc-c fs-32 text-color4 border" :class="listParams.petType == 1 ? 'active' : ''" @click="changePetType(1)"
                        >汪星人</view
                    >
                    <view class="h-100 w-f f ai-c jc-c fs-32 text-color4" :class="listParams.petType == 0 ? 'active' : ''" @click="changePetType(0)"
                        >喵星人</view
                    >
                </view>
            </view>
        </scroll-view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { foodCategory, foodSearch } from '@/services/api/index/index';
const keyword = ref('');
const typeList = ref<any[]>([]);
const show = ref<boolean>(false);
const statusList = [
    { name: '禁吃', data: 2 },
    { name: '谨吃', data: 1 },
    { name: '可以吃', data: 0 },
];
const status = ref(0);
//0: 猫 1:狗 2:其他
const queryParams = ref({ type: 1 });
const listParams = ref({
    petType: 1,
    status: 2,
    pageNo: 1,
    pageSize: 10,
});
const list = ref([]);
onLoad(() => {
    getCategory();
});
function scrolltolower() {
    listParams.value.pageNo++;
    getList();
}
//列表
async function getList() {

    const { data } = await foodSearch(listParams.value);
    list.value = list.value.concat(data);
}
//分类
async function getCategory() {
    const { data } = await foodCategory(queryParams.value);
    typeList.value = data;
    if (typeList.value.length > 0) {
        listParams.value.firstFoodCategoryCode = typeList.value[0].categoryCode;
    }
    list.value = [];
  listParams.value.pageNo = 1;
    getList();
}
//修改类型
const changePetType = (data: number) => {
    listParams.value.petType = data;
    queryParams.value.type = data;
    show.value = false;
  list.value = [];
  listParams.value.pageNo = 1;
    getCategory();
};
//修改分类
function changeCategory(e: any) {
    listParams.value.firstFoodCategoryCode = e.categoryCode;
    list.value = [];

  listParams.value.pageNo = 1;
    getList();
}
//修改吃状态
const changeStatus = (data: number, item: any) => {
    status.value = data;
    listParams.value.status = item.data;
    list.value = [];
    getList();
};
function handleSearch() {
    list.value = [];
    getList();
}
const toCanDoDetail = (data: any) => {
    uni.navigateTo({
        url: `/pages_index/canEatDetail?id=${data.id}&type=${queryParams.value.scope}`,
    });
};
let systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
let pageHeight = systemInfo.windowHeight;
const height = pageHeight - statusBarHeight - 46 - 43;
</script>
<style lang="scss" scoped>
.canDo {
    background: #f5f5f5;
    min-height: 100vh;

    .list {
        position: relative;
        .list-box:nth-child(4n) {
            margin-right: 0;
        }
        .status {
            background: #fff;
        }
        .statusActive {
            background: #faf5e6;
            border: 2rpx solid #fabb3c;
            color: #fabb3c;
        }
        .shade {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.12);
            left: 0;
            top: 0;

            .types {
                position: absolute;
                top: 28rpx;
                right: 16rpx;
                background: #fff;
                .up {
                    width: 0;
                    height: 0;
                    border-top: 16rpx solid transparent;
                    border-right: 16rpx solid transparent;
                    border-left: 16rpx solid transparent;
                    border-bottom: 16rpx solid #ffffff;
                    position: absolute;
                    top: -32rpx;
                    left: 50%;
                    margin-left: -8rpx;
                }
                .border {
                    border-bottom: 1px solid #f8f8f8;
                }
                .active {
                    background: #f8f8f8;
                }
                view:nth-child(1) {
                    border-radius: 12rpx 12rpx 0 0;
                }
                view:nth-child(2) {
                    border-radius: 0 0 12rpx 12rpx;
                }
            }
        }
    }
    .type-box {
        background: #fff;
    }
    .search {
        background: #fff;
        .search-box {
            position: relative;
            .text {
                position: absolute;
                right: 0rpx;
                top: 11rpx;
                z-index: 1;
                text-align: center;
            }
            .text::after {
                content: '';
                position: absolute;
                left: 0rpx;
                top: 7rpx;
                width: 1px;
                height: 32rpx;
                background: #dddddd;
            }
        }
    }
    ::v-deep .u-search__content {
        border-radius: 8rpx !important;
    }
    ::v-deep .u-search__content {
        justify-content: flex-start !important;
    }
    ::v-deep .u-search__content__input {
        width: 80%;
        flex: none !important;
    }
}
</style>
